<template>
    <div>
       <div class="table-responsive"  v-loading="tableLoading">
            <el-table
                     v-bind:data="tablelist"                           
                     border
                      ref="multipleTable"
                       @selection-change="handleSelectionChange"
                     style="width: 100%">
              <el-table-column
                          type="selection"
                          width="60"> 
                  </el-table-column>      
              <el-table-column
                     prop="placeName"
                     label="广告位名称"
                     width="180">
                      <template slot-scope="scope">
                        <a><span> {{scope.row.placeName }}</span></a><br/>
                        <span style="color:#999">ID: {{scope.row.id }}， 排序{{scope.row.orderid}}</span>
                     </template>
                     </el-table-column>
             <el-table-column
                     prop="adtype"
                     label="平台类型"   >
                     <template slot-scope="scope">
                        <span> {{scope.row.adtype|filter_adtype}}</span>
                     </template>
                     </el-table-column>
             <el-table-column
                     prop="placeType"
                     label="类型"   >
                     <template slot-scope="scope">
                        <span> {{scope.row.placeType|filter_placeType}}</span>
                     </template>
                     </el-table-column>
             <el-table-column
                     prop="adtags"
                     label="标签"   >
                    <template slot-scope="scope"> 
                     <el-tooltip class="item" effect="light" :content="scope.row.adtags" placement="top-start">
                        <span class="eslip1">{{scope.row.adtags}}</span>
                     </el-tooltip>
                     </template>
                  </el-table-column>     
               <el-table-column
                     prop="size"
                     label="尺寸"   >
                     <template slot-scope="scope">
                        <span> {{scope.row.placeWidth}}{{scope.row.sizeDot}}{{scope.row.placeHeight}}</span>
                     </template>
                     </el-table-column>       
             <el-table-column
                     prop="modifytime"
                     label="更新时间"  width="110" >
                     <template slot-scope="scope">
                        <span> {{scope.row.modifytime|filter_modifytime}} </span>
                     </template>
                     </el-table-column> 
             <el-table-column
                     prop="filt"
                     label="使用情况"  width="150"  >
                      <template slot-scope="scope">
                        <span style=" cursor: pointer;" @click="handleOpenAdverte(scope.$index, scope.row)">
                            <a>{{scope.row.filt}}</a> 个有效广告</span>
                     </template>

                     </el-table-column> 

              <el-table-column
                     prop="status"
                     label="状态"   >

                   <template slot-scope="scope">
                        <span :class="'adstatus'+scope.row.disabled"> 
                           {{scope.row.disabled|filter_disabled}}
                        </span>
                     </template>

                     </el-table-column>                     
              <el-table-column label="操作" width="200">
                        <template slot-scope="scope">

                        <el-button
                           size="mini" type="text"
                           @click="handleGetCode(scope.$index, scope.row)">获取代码</el-button>

                           <el-button
                           size="mini"  type="text"
                           @click="handleEdit(scope.$index, scope.row)">编辑</el-button>

                           <el-button
                           size="mini"  type="text"
                           @click="handleDelete(scope.$index, scope.row)">删除</el-button>

                           <el-button
                           size="mini"  type="text"
                           @click="handlePreview(scope.$index, scope.row)">预览</el-button>
                           
                        </template>
                     </el-table-column>
                  </el-table>
         </div>
               <!--  这里是新增广告位   -->
       <el-drawer
          ref="adverteDrawer"
          title="广告列表"
          :append-to-body="true"
          :visible.sync="adverteDrawerVisible"        
          :show-close="true"
          :before-close="handleDrawerClose"
          :wrapper-closable='false'
          :destroy-on-close="true"
          :with-header="true"
          size="85%">
           <div class="formBox" >
              <table-adverte-list
               :idplace="idplace"
               v-on:onclosedrawer="onCloseDrawer"
              ></table-adverte-list>
           </div>
        </el-drawer>

    </div>
</template>


<script> 
import TableAdverteList from "./TableAdverteList.vue";
import Options from './Options.js';

export default {
   // 加入查看 有效广告的列表组件
    components: { "table-adverte-list": TableAdverteList},
    props:{
        "tablelist":{
            type: Array, default:[],
        },
        "tableLoading":{ type: Boolean, default: false },
       
    },
    data(){
        return {
            idplace: 0,
            multipleSelection:[] ,//被选中的行
            adverteDrawerVisible : false, //显示某一个行的广告 列表抽屉；
        }
    },
     created(){
       // this.getListInfo();
     },
     filters:{
        filter_adtype(value){
            return Options.filter_adtype(value);
      
        },
         filter_placeType(value){
            
             return Options.filter_placeType(value);
        },
         filter_disabled( value){
            var label = {"0":"--","1":"删除","2":"启用", "3":"停用"};
            return label[value];
         },
         filter_modifytime(value){
             return value.split(" ")[0];
         }
     },
    
     methods:{
         clearSelection(){
            this.$refs['multipleTable'].clearSelection();
         },
         //全新勾选
         handleSelectionChange(row) {
            
             this.multipleSelection = row;
             this.$emit("handle-selection-change", row)
         },
    
         handleDelete(index, row ){
            this.$emit("onhandle-delete", index, row);
         },
         // 编辑 按钮 点击事件
         handleEdit(index, row ) {
          
            this.$emit("onhandle-edit", index, row);
         },
         //获取代码
         handleGetCode(index, row){
             this.$emit("onhandle-getcode", index, row);
         },
         // 显示广告位演示页面
         handlePreview(index, row){
            if(row.filt==0){
               this.$message({message:"暂无广告投放", type:"error"})
               return;
            }
            window.open("index.php?module=AdsPlace&action=showad&idplace=" + row.id)
         },
         handleOpenAdverte(index, row){
            // console.log(row)
            if(row.filt==0){
               this.$message({message:"暂无广告投放", type:"error"})
               return;
            }
            this.adverteDrawerVisible = true;
            this.idplace = row.id;
         },
         //显示广告 的抽屉
         handleDrawerClose(){

         },
          // 表单组件提交表单 后成功，关闭抽屉
         onCloseDrawer(e) {            
             this.$refs.adverteDrawer.closeDrawer();          
         
         },
         // 点击抽屉右上角 关闭按钮，关闭新建广告位的drawer
         handleDrawerClose(done) {
             done();               
         },
     } 
}

</script>